
<template>
	  <div class="tc-username-index fiexBox">
      <section class="tavle-content">
        <!-- 搜索 -->
        <el-form :inline="true" :model="formData" class="demo-form-inline heard-search" @submit.native.prevent>
          <el-form-item label="搜索">
            <el-input v-model="formData.searchValue" @keyup.enter.native="search" placeholder="请输入">
              <el-tooltip slot="append" class="item l" effect="dark" content="输入【用户编码】【账号】【用户名】模糊搜索" placement="top">
                <el-button icon="el-icon-warning"></el-button>
              </el-tooltip>
            </el-input>
          </el-form-item>
          <el-form-item class="content-box" label="部门">
            <el-cascader
              v-icon-hide
              :show-all-levels="true"
              filterable
              v-model="formData.deptId"
              :options="deptList"
              :props="{ checkStrictly: true, value: 'id', label: 'label', emitPath: false}"
              clearable>
              <template slot-scope="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
              </template>
            </el-cascader>
          </el-form-item>
          <el-form-item label="角色">
            <el-select v-model="formData.roleId" clearable filterable placeholder="请选择">
              <el-option v-for="(item, index) in roleList" :key="index" :label="item.roleName" :value="item.roleId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户状态">
            <el-select v-model="formData.status" clearable placeholder="请选择">
              <el-option label="停用" :value="1"></el-option>
              <el-option label="启用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-tooltip class="item" effect="dark" content="搜索" placement="top">
              <el-button class="searchbtn" icon="el-icon-search" type="primary" @click="search"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="重置" placement="top">
              <el-button class="resetBtn" icon="el-icon-refresh-left" @click="search('reset')"></el-button>
            </el-tooltip>
          </el-form-item>
          <el-form-item class="r">
            <el-button type="primary" v-if="addBtn" @click="addEdit('add')">+ 新增</el-button>
          </el-form-item>
        </el-form>

        <!-- 表格 -->
        <section class="row-table">
          <el-table
            class="rowtable"
            :data="tableData"
            highlight-current-row
            @row-dblclick="tableClick"
            v-loading="isShowLoading"
            stripe
            max-height="640"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="50">
            </el-table-column>
            <el-table-column
              align="left"
              v-for="(item, index) in tableHeaderData"
              :key="index"
              :prop="item.prop"
              :show-overflow-tooltip="true"
              :label="item.label"
              :width="item.width">
              <template slot-scope="scope">
                <span v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
                <span v-else>- -</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              :show-overflow-tooltip="true"
              label="部门">
              <template slot-scope="scope">
                <span v-if="scope.row.sysDeptList.length > 0">
                  <span v-if="item" v-for="(item, index) in scope.row.sysDeptList" :key="index">{{item.deptName}}{{index === scope.row.sysDeptList.length - 1 ? '' : ' , '}}</span>
                  <span v-else>- -</span>
                </span>
                <span v-else>- -</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              :show-overflow-tooltip="true"
              label="角色">
              <template slot-scope="scope">
                <span v-if="scope.row.sysRoleList.length > 0">
                  <span v-if="item" v-for="(item, index) in scope.row.sysRoleList" :key="index">{{item.roleName}}{{index === scope.row.sysRoleList.length - 1 ? '' : ' , '}}</span>
                  <span v-else>- -</span>
                </span>
                <span v-else>- -</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              :show-overflow-tooltip="true"
              label="岗位">
              <template slot-scope="scope">
                <span v-if="scope.row.sysPostList.length > 0">
                  <span v-if="item" v-for="(item, index) in scope.row.sysPostList" :key="index">
                    {{item.postName}}{{index === scope.row.sysPostList.length - 1 ? '' : ' , '}}
                  </span>
                  <span v-else>- -</span>
                </span>
                <span v-else>- -</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              :show-overflow-tooltip="true"
              label="小组">
              <template slot-scope="scope">
                <span v-if="scope.row.sysGroupList.length > 0">
                  <span v-if="item" v-for="(item, index) in scope.row.sysGroupList" :key="index">{{item.groupName}}{{index === scope.row.sysGroupList.length - 1 ? '' : ' , '}}</span>
                  <span v-else>- -</span>
                </span>
                <span v-else>- -</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              align="left"
              :show-overflow-tooltip="true"
              label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status">
                  <i class="statusgranden" :style="{backgroundColor: statusColor(scope.row.status)}"></i>
                  {{statusText(scope.row.status)}}
                </span>
                <span v-else>- -</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              align="left"
              :show-overflow-tooltip="true"
              label="备注">
              <template slot-scope="scope">
                <span v-if="scope.row.remark">{{scope.row.remark}}</span>
                <span v-else>- -</span>
              </template>
            </el-table-column>
            <el-table-column
              v-show="operationBtn"
              fixed="right"
              label="操作"
              align="left"
              width="150">
              <template slot-scope="scope">
                <el-button  type="text" size="medium" class="p3" v-if="editBtn"  @click="addEdit('edit', scope.row)">编辑</el-button>
                <el-dropdown trigger="click" @command="dropdownCommand">
                  <span class="el-dropdown-link left-shu">
                    <el-button  type="text" size="medium" class="p3"><i class="iconfont icongengduo1"></i> 更多<i class="iconfont iconarrow-down"></i></el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="{key: 0, row: scope.row}" v-if="scope.row.status == 1 && disabledBtn">启用</el-dropdown-item>
                    <el-dropdown-item :command="{key: 1, row: scope.row}" v-if="scope.row.status != 1 && disabledBtn">停用</el-dropdown-item>
                    <el-dropdown-item :command="{key: 'reset', row: scope.row}" v-if="resetPwdBtn">重置密码</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </section>

        <div class="block-pagination r clearfix">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formData.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="formData.pageSize"
            layout="total, prev, pager, next, sizes, jumper"
            :total="totalCont">
          </el-pagination>
        </div>
      </section>

      <!-- 选择器 -->
      <!-- <dialog-select v-if="false" :propTitle="'用户选择'"></dialog-select> -->
    </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex';
// import dialogSelect from '@/components/dialogSelect/index'; //选择器.
// import groupList from '@/components/groupList/index'; //组织表格
// import {userFindByPage, updateUserEnabl, resetPwd} from '@/axios/user/user';
// import { findPartnerRoleList } from '@/axios/user/role';
// import { getDepartmentList } from '@/axios/user/department';

var viewer = null;
export default {
  name: 'username',
  data () {
    return {
      formData: {
        pageNum: 1,
        pageSize: 10,
        partnerId: '',
        searchValue: '',
        roleId: '',
        status: '',
        deptId: ''
      },
      totalCont: 0,
      isShowLoading: false,
      roleList: [],
      deptList: [],
      tableHeaderData: [
        { label: '账号', prop: 'userName', width: '150'},
        { label: '姓名', prop: 'nickName', width: '100'},
        { label: '用户编码', prop: 'userCode', width: '100'},
      ],
      tableData: [],
      editBtn: false,
      addBtn: false,
      disabledBtn: false,
      resetPwdBtn: false,
      operationBtn: false
    }
  },
  computed:{
    ...mapState([
      'editableTabs',
      'editableTabsValue',
      'partnerData',
      'menuData',
      'isSystem'
    ])
  },
  watch: {
    '$store.state.partnerData': {
      immediate: true,
      handler (v, o) {
        if (v) {
          this.formData.partnerId = this.partnerData.id
          if (this.$route.query.pageNum) {
            this.formData.pageNum = this.$route.query.pageNum
          }
          if (o) {
            this.formData.pageNum = 1
          }
          this.getTableList()
          this.init()
        }
      }
    }
  },
  components: {
    // dialogSelect,
    // groupList
  },
  mounted() {
  },
  created(){
    this.getBtnAuth()
  },
  methods: {
      ...mapMutations([
         'SAVE_TOKEN',
         'DETALE_EDITABLETABS',
         'SAVE_EDITABLETABSVALUE'
       ]),
       init() {
         findPartnerRoleList({
           partnerId: this.partnerData.id
         }).then(res => {
           if (res.code === 200) {
             this.roleList = res.data
           }
         })
         getDepartmentList({
           partnerId: this.partnerData.id
         }).then(res => {
           if (res.code === 200) {
             this.deptList = res.data
           }
         })
       },
       getBtnAuth() {
         var menuItem = []
         this.menuData.forEach((menu, item) => {
           menu.children.forEach((threeMunu) => {
             if (this.$route.name === threeMunu.menuName) {
               menuItem = threeMunu
               return
             }
           })
         })
         menuItem.btnChildren.forEach((item, index) => {
           if (item.component === 'edit') {
             this.editBtn = true
           }
           if (item.component === 'add') {
             this.addBtn = true
           }
           if (item.component === "switch") {
             this.disabledBtn = true
           }
           if (item.component === "reset") {
             this.resetPwdBtn = true
           }
         })
         if (this.editBtn || this.resetPwdBtn || this.disabledBtn) {
           this.operationBtn = true
         }
	    },
      async getTableList() {
        this.isShowLoading = true
        let data = await userFindByPage(this.formData)
        if (data.code === 200) {
          this.tableData = data.rows
          this.totalCont = data.total
        }
        this.isShowLoading = false
      },
      search(param) {
        if (param === 'reset') {
          this.formData.searchValue = ''
          this.formData.roleId = ''
          this.formData.status = ''
        }
        this.getTableList()
      },
      /**
      * @method 新增/编辑
      * @param {string} type add 新增 edit 编辑
      */
      addEdit(type, params) {
          this.$router.push({
            name: 'addUser',
            query: {
              type: type,
              userId: params ? params.userId : '',
              partnerId: this.partnerData.id,
              partnerName: this.partnerData.partnerName,
              pageNum: this.formData.pageNum
            }
          })
      },
      statusColor(status) {
        let color = ''
        if (status == 0) {
          color = '#4ab244'
        } else {
          color = '#ff0000'
        }
        return color
      },
      statusText(status) {
        let text = ''
        if (status == 0) {
          text = '启用'
        } else if (status == 1) {
          text = '停用'
        } else {
          text = '停用'
        }
        return text
      },
      handleSizeChange(val) {
        this.formData.pageNum = 1
        this.formData.pageSize = val
        this.getTableList()
      },
      handleCurrentChange(val) {
        this.formData.pageNum = val
        this.getTableList()
      },
      /**
       * @method 下拉菜单点击
       * @param {string} param 1 启用 3 停用 reset 重置密码
       */
      dropdownCommand(param) {
        var confirmText = ''
        if (param.key !== 'reset') {
          if (param.key === 1) { confirmText = '停用后该用户将无法登录平台，是否确认停用？'}
          else if (param.key === 0) { confirmText = '是否启用该账户？'}
          this.$confirm(confirmText, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            updateUserEnabl({status: param.key, userId: param.row.userId}).then((res) => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: res.msg
                })
                this.getTableList()
              }
            })
          }).catch(() => {})
        } else if (param.key === 'reset') {
          confirmText = '是否确认重置该账户密码?'
          this.$confirm(confirmText, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            resetPwd({userId: param.row.userId}).then((res) => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: res.msg
                })
                this.getTableList()
              }
            })
          }).catch((res) => {
          })
        }
      },
      /**
       * @method 表格点击
       */
      tableClick(row, column) {
        this.$router.push({
          path: '/system/user/details',
          query: {
            id: row.userId,
            pageNum: this.formData.pageNum
          }
        })
      }
  }
};
</script>

<style lang="scss">
@import "./index.scss";
</style>